@import "./mixins.less";

.bk-root {
  .bk-menu {
    &.bk-above {
      bottom: 100%;
    }
    &.bk-below {
      top: 100%;
    }

    position: absolute;
    left: 0;
    width: 100%;
    .bring-to-front();

    cursor: pointer;
    font-size: @font-size;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: @border-radius;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

    & > .bk-divider {
      height: 1px;
      margin: ((@line-height-computed / 2) - 1) 0;
      overflow: hidden;
      background-color: #e5e5e5;
    }

    & > :not(.bk-divider) {
      padding: @padding-vertical @padding-horizontal;

      &:hover, &.bk-active {
        background-color: darken(white, 10%);
      }
    }
  }

  @caret-width: 4px;

  .bk-caret {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    margin: 0 5px;

    &.bk-down { border-top:    @caret-width solid; }
    &.bk-up   { border-bottom: @caret-width solid; }

    &.bk-down, &.bk-up {
      border-right: @caret-width solid transparent;
      border-left:  @caret-width solid transparent;
    }

    &.bk-left  { border-right: @caret-width solid; }
    &.bk-right { border-left:  @caret-width solid; }

    &.bk-left, &.bk-right {
      border-top:    @caret-width solid transparent;
      border-bottom: @caret-width solid transparent;
    }
  }
}
